<template>
  <div>
    <Form ref="queryForm" :model="dataToQuery" :label-width="120">
      <Row class="query-form">
        <Col span="8">
          <FormItem label='所属企业：'>
            <cascaderDom class="query-form-el" ref="groupOrg1" style="width: 100%;"
                         @setOrgInfo='setOrgId'
                         @setOrgname='setOrgName'
                         :orgTree="true"></cascaderDom>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label='归属地区：'>
            <Select v-model="dataToQuery.attriErea">
              <Option v-for="item in areaTreeMap['0']" :value="item.value" :key="item.value">{{ item.label }}
              </Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8" v-if="!switchFlag">
          <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
          <Button @click="reseter" class="ivu-btn-reset">重置</Button>
          <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
        <Col span="8" v-else>
          <FormItem label='安全文化示范企业级别：'>
            <Select multiple v-model="safeLevels">
              <Option v-for="item in safeLevelList" :value="item.codingCodeId"
                      :key="item.codingCodeId">{{ item.codingName }}
              </Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8">
          <FormItem label='安全生产标准化等级：'>
            <Select filterable v-model="safeRanks" multiple>
              <Option v-for="item in stdRankList" :value="item.codingCodeId"
                      :key="item.codingCodeId">{{ item.codingName }}
              </Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label='职业健康体系认证：'>
            <Select class="query-form-el" v-model="dataToQuery.health" style="width: 100%;">
              <Option v-for="item in isPullateList" :value="item.value"
                      :key="item.value">{{ item.name }}
              </Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label='环境管理体系认证：'>
            <Select class="query-form-el" v-model="dataToQuery.manage" style="width: 100%;">
              <Option v-for="item in isPullateList" :value="item.value"
                      :key="item.value">{{ item.name }}
              </Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8">
          <FormItem label='是否重点排污单位：' prop='isPullate'>
            <Select class="query-form-el" v-model="dataToQuery.isPullate" style="width: 100%;">
              <Option v-for="item in isPullateList" :value="item.value"
                      :key="item.value">{{ item.name }}
              </Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="二级集团：">
            <Select v-model="dataToQuery.twoLevelOrgId" @on-change="selectTwoLevelOrg" clearable multiple
                    :max-tag-count="1">
              <Option v-for="item in twoOrgList" :value="item.orgId" :key="item.orgId">{{ item.orgName }}
              </Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
          <Button @click="reseter" class="ivu-btn-reset">重置</Button>
          <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>

    </Form>
    <Table ref='table' :height="300" no-data-text="没有查询到相关数据!"
           :loading='pageStatus.loading ||  pageStatus.baseLoading'
           border :columns="columns1" :data="dataTable">
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange1"
              @on-page-size-change="pageSizeChange1" :page-size-opts="pageSizeArray" show-total show-sizer
              show-elevator/>
      </Col>
    </Row>
  </div>
</template>

<script>
import pageCommonFunction from '@/components/pageCommonFunction.js'
import {Api} from '@/api/index.js'
import {mapState} from "vuex";


var cascaderDom = () => import('@/components/cascader-dom.vue');
export default {
  name: "envInfoCompany",
  components: {
    cascaderDom,
  },
  computed: {
    ...mapState('trhg', {
      areaMap: state => state.area.areaMap ? state.area.areaMap : [],
      areaTreeMap: state => state.area.areaTreeMap ? state.area.areaTreeMap : {},
    }),
  },
  data() {
    return {
      ...this.createCommonDataField(),
      safeRanks: [],
      safeLevels: [],
      twoOrgList: [],
      stdRankList: [],
      isPullateList: [
        {
          name: "是",
          value: "0"
        },
        {
          name: "否",
          value: "1"
        }
      ],
      columns1: [
        {title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        {key: 'groupComName', title: '所属集团', minWidth: 150, align: 'center'},
        {key: 'companyName', title: '企业名称', minWidth: 150, align: 'center'},
        {
          key: 'attriErea', title: '归属地区', minWidth: 150, align: 'center', render: (h, params) => {
            return h('span', this.areaCodeToAreaName(params.row.attriErea));
          }
        },
        {key: 'legalName', title: '法人代表', minWidth: 150, align: 'center'},
        {key: 'staffNumber', title: '单位从业人数', minWidth: 150, align: 'center'},
        {key: 'industry', title: '行业', minWidth: 150, align: 'center'},
        {key: 'safeLicence', title: '生产许可证获得时间', minWidth: 200, align: 'center', render: this.renderCellDate},
        {
          key: 'isPullate', title: '是否重点排污单位', minWidth: 200, align: 'center', render: (h, params) => {
            return h('div', [params.row.isPullate === '0' ? '是' : '否']);
          }
        },
        {key: 'safeRank', title: '安全生产标准化等级', minWidth: 200, align: 'center'},
        {key: 'safeDate', title: '安全标准化达标时间', minWidth: 200, align: 'center', render: this.renderCellDate},
        {key: 'safeLevel', title: '安全文化示范企业级别', minWidth: 200, align: 'center'},
        {key: 'exampleDate', title: '安全文化示范企业获得时间', minWidth: 200, align: 'center', render: this.renderCellDate},
        {key: 'healthDate', title: '职业健康体系认证时间', minWidth: 200, align: 'center', render: this.renderCellDate},
        {key: 'manageDate', title: '环境管理体系认证时间', minWidth: 200, align: 'center', render: this.renderCellDate},
        {key: 'safeOrg', title: '安全管理机构', minWidth: 150, align: 'center'},
        {key: 'envOrg', title: '环保管理机构', minWidth: 150, align: 'center'},
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 160,
          align: 'center',
          render: (h, params) => {

            return h('div', [
              h('A', {
                props: {type: 'primary', size: 'small'},
                style: {fontSize: '14px',},
                on: {
                  click: () => {
                    this.$emit('getInfo', params.row)
                  }
                }
              }, '选择')])
          }
        }
      ],

      queryUrl: Api.queryEnvInfoCompan,

    }
  },
  async mounted() {
    this.dataToQuery = {};
    this.$http.get(Api.getTwoOrgInfo).then((res) => {
      this.twoOrgList = res.data.data;
    }).catch(e => {
      this.$Message.error("数据获取失败")
    });
    await this.$store.dispatch('trhg/area/query', {scope: this}, {root: true});
    this.$http.get(Api.queryCodeDetailBySortId + '/SSL-000001', {params: {}}).then((res) => {
      this.stdRankList = res.data.data;
    });
    this.$http.get(Api.queryCodeDetailBySortId + '/env-00001', {params: {}}).then((res) => {
      this.industryList = res.data.data;
    });
    this.$http.get(Api.queryCodeDetailBySortId + '/env-00002', {params: {}}).then((res) => {
      this.safeLevelList = res.data.data;
    });
    this.$http.get(Api.quqeryTwoOrgInfo).then((res) => {
      this.twoOrgInfo = res.data.data;
    });
    this.pageStatus.baseLoading = false
    this.query();
    this.tempAreaTree = this.areaTreeMap['0']
  },
  methods: {
    ...pageCommonFunction,
    setOrgId(data) {
      this.dataToQuery.companyOrgId = data[data.length - 1];
    },
    setOrgName(data) {

    },
    selectTwoLevelOrg(value) {
      this.dataToQuery.twoLevelOrgIds = value.join()
    },
    query() {
      this.dataToQuery.safeLevels = "";
      this.dataToQuery.safeRanks = "";

      this.safeRanks.forEach(item => {

        this.dataToQuery.safeRanks += item + ","
      });
      this.safeLevels.forEach(item => {

        this.dataToQuery.safeLevels += item + ","
      });

      this.query1()
    },
    reseter() {
      this.safeRanks = [];
      this.safeLevels = [];
      this.dataToQuery = {};
      this.$refs.groupOrg1.resetCurrentOrg();
      this.query1()
    },
  }


}
</script>

<style scoped>

</style>
